<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My Account - Premium Multipurpose HTML5/CSS3 Theme</title>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- FAVICONS -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/icons/apple-touch-icon-144-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" th:href="@{/icons/apple-touch-icon-114-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/icons/apple-touch-icon-72-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{/icons/apple-touch-icon-57-precomposed.png}"/>
    <link rel="shortcut icon" th:href="@{/icons/favicon.png}"/>

    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{/css/slick-1.6.0/slick.css}"/>

    <link rel="stylesheet" th:href="@{/css/jquery.fancybox.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-compare/colorbox.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/js_composer/js_composer.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-wishlist/style.css}"/>

    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/app-orange.css}" id="theme_color"/>
    <link rel="stylesheet" href="" id="rtl"/>
    <link rel="stylesheet" th:href="@{/css/app-responsive.css}"/>
</head>

<body class="page woocommerce-account woocommerce-page">
<div class="body-wrapper theme-clearfix">
    <!--引入顶部栏  top mid bottom-->
    <header id="header" class="header header-style1">


        <div class="widget pull-left" style="margin-left: 300px">
            <div class="widget-inner">
                <div id="lang_sel">
                    <ul class="nav">
                        <li>
                            <a class="lang_sel_sel">
                                <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}" width="18"
                                     height="12"/> English
                            </a>
                            <ul>
                                <li>
                                    <a th:href="@{/createaccount(l='en_US')}">
                                        <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}"
                                             width="18" height="12"/> English
                                    </a>
                                </li>

                                <li>
                                    <a th:href="@{/createaccount(l='zh_CN')}">
                                        <img class="iclflag" title="中文" alt="ar" th:src="@{images/icons/ar.png}"
                                             width="18" height="12"/> 中文
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

        <div th:replace="commons/bar::#bottom"></div>
    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">
                <h1 th:text="#{myaccount}">My Account</h1>
                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li>
                                    <a href="index.html" th:text="#{home}">Home</a>
                                    <span class="go-page"></span>
                                </li>

                                <li class="active">
                                    <span th:text="#{myaccount}">My account</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents" role="main" class="main-page col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="single page type-page status-publish hentry">
                    <div class="entry">
                        <div class="entry-content">
                            <header>
                                <h2 class="entry-title" th:text="#{myaccount}">My Account</h2>
                            </header>

                            <div class="entry-content">
                                <div class="woocommerce">
                                    <div class="col2-set row" id="customer_login">
                                        <div class="col-lg-6">
                                            <h2 th:text="#{login.btn}">Login</h2>
                                            <!--登录 -->
                                            <form method="post" class="login" th:action="@{/login}">
                                                <p class="form-row form-row-wide">
                                                    <label for="username">
                                                        [[#{username}]] <span class="required">*</span>
                                                    </label>

                                                    <input type="text" class="input-text" name="username"
                                                           th:placeholder="${savename}" id="username"
                                                           th:value="${savename}"/>
                                                </p>

                                                <p class="form-row form-row-wide">
                                                    <label for="password">
                                                        [[#{password}]] <span class="required">*</span>
                                                    </label>

                                                    <input class="input-text" type="password" name="password"
                                                           id="password"/>
                                                </p>
                                                <!--记住用户名
                                            判断是否勾选，若勾选则，用cookie进行保存-->

                                                <p class="form-row">
                                                    <label for="remember" class="inline">
                                                        <input name="rememberme" type="checkbox" id="remember"
                                                               value="forever"/> [[#{remember}]]
                                                    </label>
                                                </p>

                                                <p class="form-row">
                                                    <input type="submit" class="button" name="login"
                                                           th:value="#{login.btn}"/>
                                                </p>

                                                <p class="lost_password">
                                                    <a th:href="@{/lost_password}">[[#{lostpassword}]]</a>
                                                </p>
                                            </form>
                                            <!--判断-->
                                            <p style="color: red" th:text="${msg}"
                                               th:if="${not #strings.isEmpty(msg)}"></p>
                                        </div>
                                        <!--注册栏-->
                                        <div class="col-lg-6">
                                            <h2 th:text="#{register}">Register</h2>

                                            <form method="post" class="register" th:action="@{/createaccount}">
                                                <!--用户名-->
                                                <p class="form-row form-row-wide">
                                                    <label for="reg_email">
                                                        [[#{usern}]] <span class="required">*</span>
                                                    </label>

                                                    <input type="text" class="input-text" name="username" value=""/>
                                                </p>

                                                <!--邮箱-->
                                                <p class="form-row form-row-wide">
                                                    <label for="reg_email">
                                                        [[#{emailaddress}]] <span class="required">*</span>
                                                    </label>

                                                    <input type="email" class="input-text" name="email" id="reg_email"
                                                           value=""/>
                                                </p>
                                                <!--电话-->
                                                <p class="form-row form-row-wide">
                                                    <label for="reg_password">
                                                        [[#{tel}]] <span class="required">*</span>
                                                    </label>
                                                    <input type="tel" class="input-text" name="phone"/>
                                                </p>

                                                <!--密码-->
                                                <p class="form-row form-row-wide">
                                                    <label for="reg_password">
                                                        [[#{password}]] <span class="required">*</span>
                                                    </label>

                                                    <input type="password" class="input-text" name="password"
                                                           id="reg_password"/>
                                                </p>


                                                <div class="form-group">
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="sex" id="optionsRadios1" value="男"
                                                                   checked>
                                                            [[#{man}]]
                                                        </label>
                                                    </div>
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="sex" id="optionsRadios2"
                                                                   value="女">
                                                            [[#{woman}]]
                                                        </label>
                                                    </div>
                                                </div>
                                                <input name="access" value="0" type="hidden">
                                                <p class="form-row">
                                                    <input type="submit" class="button " name="register"
                                                           th:value="#{register}"/>
                                                </p>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- DIALOGS -->

<div th:replace="commons/bar::#login_form"></div>

<a id="etrostore-totop" href="#"></a>

<script type="text/javascript">
    /* <![CDATA[ */
    var wc_password_strength_meter_params = {
        "min_password_strength": "3",
        "i18n_password_error": "Please enter a stronger password.",
        "i18n_password_hint": "The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! \" ? $ % ^ & )."
    };
    var pwsL10n = {
        "unknown": "Password strength unknown",
        "short": "Very weak",
        "bad": "Weak",
        "good": "Medium",
        "strong": "Strong",
        "mismatch": "Mismatch"
    };
    /* ]]> */
</script>

<script type="text/javascript" th:src="@{js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/jquery-migrate.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/js.cookie.min.js}"></script>
<script type="text/javascript" th:src="@{js/zxcvbn.min.js}"></script>

<!-- OPEN LIBS JS -->
<script type="text/javascript" th:src="@{js/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{js/slick-1.6.0/slick.min.js}"></script>

<script type="text/javascript" th:src="@{js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
<script type="text/javascript" th:src="@{js/isotope/isotope.js}"></script>
<script type="text/javascript" th:src="@{js/fancybox/jquery.fancybox.pack.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/category-ajax.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/jquery.countdown.min.js}"></script>
<script type="text/javascript" th:src="@{js/wp-admin/password-strength-meter.min.js}"></script>
<script type="text/javascript" th:src="@{js/woocommerce/password-strength-meter.min.js}"></script>
<script type="text/javascript" th:src="@{js/js_composer/js_composer_front.min.js}"></script>

<script type="text/javascript" th:src="@{js/plugins.js}"></script>
<script type="text/javascript" th:src="@{js/megamenu.min.js}"></script>
<script type="text/javascript" th:src="@{js/main.min.js}"></script>

<script type="text/javascript">
    var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $("#header .header-bottom").addClass("sticky-menu");
            $("#header .header-bottom").css({"top": 0, "left": 0, "right": 0});
        } else {
            $("#header .header-bottom").removeClass("sticky-menu");
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });

    $(document).ready(function () {
        $(".show-dropdown").each(function () {
            $(this).on("click", function () {
                $(this).toggleClass("show");
                var $element = $(this).parent().find("> ul");
                $element.toggle(300);
            });
        });
    });
</script>

</body>
</html>